<template>
	<div class="card-details-box">
		<div class="card-details-info">
			<p class="card-details-info1 clearfix">
				<span class="fl info1-span1">全合成保养卡</span>
				<span class="fr info1-span2">B5069856789</span>
			</p>
			<p class="card-details-info2 clearfix">
				<span class="fl info2-span1">*仅限上海门店使用</span>
				<span class="fr info2-span2">
					有效期：<b>2016.9.12-2016.12.19</b>
				</span>
			</p>
		</div>
		<div class="card-details-item">
			<p class="card-details-item1">
				<span class="item1-title">服务项目</span>
				<span class="item1-rule fr">
					使用规则
					<span class="iconfont icon-arrows"></span>
				</span>
			</p>
			<ul class="card-details-ul">
				<li>
					<span class="card-details-circle"></span>
					<span class="ul-con">嘉实多半合成保养套餐4L（共3次）</span>
					<span class="ul-num fr">剩余2次</span>
				</li>
				<li>
					<span class="card-details-circle"></span>
					<span class="ul-con">嘉实多半合成保养套餐4L（共3次）</span>
					<span class="ul-num fr">剩余2次</span>
				</li>
				<li>
					<span class="card-details-circle"></span>
					<span class="ul-con">嘉实多半合成保养套餐4L（共3次）</span>
					<span class="ul-num fr">剩余2次</span>
				</li>
				<li>
					<span class="card-details-circle"></span>
					<span class="ul-con">嘉实多半合成保养套餐4L（共3次）</span>
					<span class="ul-num fr">剩余2次</span>
				</li>
				<li>
					<span class="card-details-circle"></span>
					<span class="ul-con">嘉实多半合成保养套餐4L（共3次）</span>
					<span class="ul-num fr">剩余2次</span>
				</li>
				<li>
					<span class="card-details-circle"></span>
					<span class="ul-con">嘉实多半合成保养套餐4L（共3次）</span>
					<span class="ul-num fr">剩余2次</span>
				</li>
				<li>
					<span class="card-details-circle"></span>
					<span class="ul-con">嘉实多半合成保养套餐4L（共3次）</span>
					<span class="ul-num fr">剩余2次</span>
				</li>
				<li>
					<span class="card-details-circle"></span>
					<span class="ul-con">嘉实多半合成保养套餐4L（共3次）</span>
					<span class="ul-num fr">剩余2次</span>
				</li>
			</ul>
		</div>
	</div>
	<div class="card-details-btn">
		<a href="">用卡下单</a>
	</div>
</template>

<script type="text/javascript">

</script>

<style lang="scss">
 
	@import '../../assets/css/common.scss';

	
	.card-details-box {
		margin: rem(20) rem(10) rem(35) rem(10);
		padding: 0 rem(10);
		background-color: #fff;
		border-radius: rem(8);
	}
	.card-details-info1 {
		height: rem(40);
		line-height: rem(40);
		border-bottom: 1px solid #dedede;
	}
	.info1-span1 {
		font-size: rem(18);
	}
	.info1-span2 {
		font-size: rem(13);
		color: #999;
	}
	.card-details-info2 {
		height: rem(40);
		line-height: rem(40);
		border-bottom: 1px dashed #dedede;
		font-size: rem(13);
		color: #999;
	}
	b  {
		font-weight: 100!important;
	}
	.card-details-item1 {
		height: rem(40);
		line-height: rem(40);
		border-bottom: 1px solid #dedede;
	}
	.item1-title {
		font-size: rem(14);
		color:#1f323e;
	 }
	 .item1-rule {
		font-size: rem(13);
	 }
	 .card-details-ul {
	 	width: 100%;
	 	height: auto;
	 	overflow: hidden;
	 }
	 .card-details-ul li {
	 	height: rem(40);
		line-height: rem(40);
		border-bottom: 1px solid #dedede;
		font-size: rem(13);
	 }
	 .card-details-circle {
	 	display: inline-block;
	 	background:#e9e9e9;
		width:10px;
		height:10px;
		border-radius:100%;
	 }
	.ul-con {
		color: #666;
	}
	.ul-num {
		color: #999;
	}
	.card-details-btn {
		background-color: #ff6600;
		height: rem(48);
		line-height: rem(48);
		font-size: rem(18);
		text-align: center;
	}
	.card-details-btn a {
		display: block;
		color: #fff;
	}
</style>